<template>
  <div>
    <!-- <h1>当前求和为：{{he}}</h1>
    <h3>当前求和放大10倍为：{{bigSum}}</h3>
    <h3>我在{{xuexiao}}，学习{{xueke}}</h3> -->

    <h1>当前求和为：{{sum}}</h1>
    <h3>当前求和放大10倍为：{{bigSum}}</h3>
    <h3>我在{{school}}，学习{{subject}}</h3>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increament">+</button>
    <button @click="decreament">-</button>
    <button @click="increamentOdd">当前求和为奇数再加</button>
    <button @click="increamentWait">+</button>
  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'

  export default {
    name: "Count",
    data() {
      return {
        n: 1
      }
    },
    computed: {
      // 映射state中的数据为计算属性（程序员手动实现）
      /* he() {
        return this.$store.state.sum
      },
      xuexiao() {
        return this.$store.state.school
      },
      xueke() {
        return this.$store.state.subject
      }, */

      // 借助mapState生产计算属性，从state中读取数据（对象写法）
      // ...mapState({he: 'sum', xuexiao: 'school', xueke: 'subject'}),

      /* sum() {
        return this.$store.state.sum
      },
      school() {
        return this.$store.state.school
      },
      subject() {
        return this.$store.state.subject
      }, */

      // 借助mapState生产计算属性，从state中读取数据（数组写法），需要保证读取的属性名与state中的属性名一致
      // ...mapState({sum: 'sum', school: 'school', subject: 'subject'})
      // 不能简写成 ...mapState({sum, school, subject})，因为sum, school, subject是字符串，不是变量，不能简写
      // 数组形式的简写
      ...mapState(['sum', 'school', 'subject']),

      /* *********************************************************************************** */

      /* bigSum() {
        return this.$store.getters.bigSum
      }, */

      // 借助mapGetters生产计算属性，从getters中读取数据（对象写法）
      // ...mapGetters({bigSum: 'bigSum'})

      // 借助mapGetters生产计算属性，从getters中读取数据（数组写法）
      ...mapGetters(['bigSum'])
    },
    methods: {
      increament() {
        // 注意大小写 注意对应的是actions还是mutations
        // this.$store.dispatch("jia", this.n)
        this.$store.commit("JIA", this.n)
      },
      decreament() {
        // this.$store.dispatch("jian", this.n)
        this.$store.commit("JIAN", this.n)
      },
      increamentOdd() {
        this.$store.dispatch("jiaOdd", this.n)
      },
      increamentWait() {
        this.$store.dispatch("jiaWait", this.n)
      },
    },
    mounted() {
      // console.log("Count", this.$store)
      // let x = mapState({he: 'sum', xuexiao: 'school', xueke: 'subject'});
      // console.log(x)
    }
  }
</script>

<style>

</style>